<template>
	<view>
		<view class="topline"></view>
		<view class="" style="padding: 30rpx;">
			<rich-text :nodes="detail.content"></rich-text>
		</view>
		<!-- <view class="center">
			<view class="center_name">{{火虎智算小盒子火虎智算小盒子火虎智算小盒子火虎}}</view>
			<view class="center_info">火虎智算 <text>2024-10-10 10:30</text> </view>
			<image src="../../static/bg@2x.png" mode=""></image>
			<view class="center_text">
				火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业火虎智算小盒子业务火虎智算小盒子业务火虎智算小盒子业务火虎智算小
			</view>
		</view> -->
		<view class="isline"></view>
		<view class="discuss">
			<view class="discuss_name">{{$t('information.name2')}}{{commentList.length}}</view>
			<view class="discuss_main" v-for="(item,index) in commentList" :key="index">
				<view class="top">
					<image :src="$fun.imgUrl(item.avatar)" mode=""></image>
					<view class="">{{item.nickname}}</view>
					<view class="time">{{item.createtime}}</view>
				</view>
				<view class="text">
					{{item.content}}
				</view>
			</view>
		</view>
		<view class="" style="height: 110rpx;"></view>
		<view class="btngo">
			<view class="btngo_input" @click="clickinput">{{$t('information.name2')}}</view>
		</view>
		<u-popup :show="inputshow" mode="top" @close="inputshow = false">
			<view class="btngo1">
				<view class="isinput">
					<textarea name="" id="" :auto-height="true" cols="30" rows="10" v-model="inputvalue"></textarea>
					<!-- <input type="text" :focus='true'  /> -->
				</view>
				<view class="isbtn" @click="addcomment">{{$t('information.name3')}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyheight: 0,
				inputshow: false,
				inputvalue: '',
				detail: {
					content: ''
				},
				commentList: [],
				id: ''
			}
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: options.name
			})
			this.id = options.id
			this.$fun.ajax.post('news/getNews', {
				id: options.id,
				type: options.type
			}).then(res => {
				this.detail = res.data
			})
			this.getcommentList()
		},
		methods: {
			clickinput() {
				this.inputshow = true
				uni.onKeyboardHeightChange(res => {
					this.keyheight = res.height
				})
			},
			getcommentList() {
				this.$fun.ajax.post('news/commentList', {
					id: this.id
				}).then(res => {
					this.commentList = res.data
				})
			},
			addcomment() {
				if (this.inputvalue == '') {
					this.$fun.msg(this.$t('information.name4'))
					return;
				}
				this.$fun.ajax.post('news/comment', {
					id: this.id,
					content: this.inputvalue
				}).then(res => {
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						this.getcommentList()
					}
					this.inputshow = false
					this.inputvalue = ''
				})
			}
		}
	}
</script>

<style lang="scss">
	.topline {
		width: 750rpx;
		height: 2rpx;
		background: #EAEAEA;
	}

	.center {
		padding: 30rpx;

		&_name {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333
		}

		&_info {
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			margin: 18rpx 0 30rpx;

			text {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}

		image {
			width: 690rpx;
			height: 300rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
		}

		&_text {
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
			line-height: 37rpx;
		}
	}

	.isline {
		width: 750rpx;
		height: 16rpx;
		background: #F5F1EE;
	}

	.discuss {
		padding: 30rpx;

		&_name {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
		}

		&_main {
			margin-top: 30rpx;

			.top {
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 10rpx;
					border: 1rpx solid #F5F1EE;
				}

				.time {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-left: 10rpx;
				}
			}

			.text {
				margin-left: 50rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.btngo {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;

		&_input {
			width: 690rpx;
			height: 64rpx;
			background: #F6F6F6;
			border-radius: 32rpx;
			line-height: 64rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin: 18rpx auto;
		}
	}

	.btngo1 {
		width: 750rpx;
		min-height: 100rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 18rpx 30rpx;
		position: fixed;
		bottom: 0;

		.isinput {
			width: 540rpx;
			min-height: 64rpx;
			background: #F6F6F6;
			border-radius: 42rpx;
			box-sizing: border-box;

			textarea {
				width: 540rpx;
				min-height: 44rpx;
				/* #ifdef MP-WEIXIN */
				min-height: 44px;
				/* #endif */
				padding: 10rpx 30rpx;
			}
		}

		.isbtn {
			width: 120rpx;
			height: 64rpx;
			background: #5990FF;
			border-radius: 32rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 64rpx;
			text-align: center;
		}
	}
</style>